<template>
  <view class="create-or-edit-address-container">
    <e-navbar :leftTitle="title"></e-navbar>
    <u-gap height="15"></u-gap>
    <view class="main-card mine-info-card" style="padding: 0 30rpx">
      <view class="cell-item ">
        <view class="label">联系人</view>
        <view class="value">
          <u-input v-model="form.name" placeholder="请输入收货人姓名" placeholderClass="placeholderClass" border="none"></u-input>
        </view>
      </view>
      <view class="cell-item ">
        <view class="label">手机号</view>
        <view class="value">
          <u-input v-model="form.mobile" type="number" placeholder="请输入收货人的手机号码" placeholderClass="placeholderClass" border="none"></u-input>
        </view>
      </view>
      <view class="cell-item ">
        <view class="label">所在地区</view>
        <view class="value">
          <e-data-picker
            class="flex-1"
            popup-title="选择收货地址"
            placeholder="请选择收货地址"
            v-model="form.address"
            @change="onChange"
            @nodeclick="onNodeClick"
          ></e-data-picker>
          <u-icon name="arrow-right" size="14" color="#999999"></u-icon>
        </view>
      </view>
      <view class="cell-item ">
        <view class="label">详细地址</view>
        <view class="value">
          <u-input v-model="form.detail" placeholder="街道、楼牌号等" placeholderClass="placeholderClass" border="none"></u-input>
        </view>
      </view>
    </view>
    <u-gap height="10"></u-gap>
    <view class="main-card mine-info-card" style="padding: 0 30rpx">
      <view class="cell-item ">
        <view class="label">设为默认地址</view>
        <view class="value">
          <u-switch v-model="form.is_default"></u-switch>
        </view>
      </view>
    </view>
    <u-gap height="140"></u-gap>
    <view class="main-btn m-30">
      <u-button text="确定" color="#1F66FF" @click="handleConfirmBtn"></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      placeholderStyle:"font-size: 28rpx;color: #f00;",
      form: {
        name: '',
        mobile: '',
        address: '',
        detail: '',
        is_default: false,
      },
      title: "地址列表",
    };
  },
  onLoad(options) {
    if(options.title){
      this.title = options.title;
    }
  },
  methods: {
    onChange(event) {
      // 处理选择变化
      console.log('onChange2222', event);
    },
    onNodeClick(event) {
      // 处理节点点击
      console.log('onChange', event);
    },
    handleConfirmBtn(){
      console.log('handleConfirmBtn', this.form);
    }
  },
  options: {
    styleIsolation: 'shared'
  }
}
</script>

<style lang="scss" scoped>
  .create-or-edit-address-container{
    .mine-info-card{
      padding: 30rpx;
      .cell-item{
        padding: 30rpx 0;
      }
      .cell-item:not(:last-child){
        border-bottom: 1px solid #EEEEEE;
      }
      .cell-item,.value{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .label{
        color: #333333;
        font-size: 30rpx;
      }
      $address-text-color: #999;
      $address-text-size: 14px;
      .value{
        color: $address-text-color;
        font-size: $address-text-size;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-left: 30rpx;
        /deep/ .placeholderClass{
          font-size: $address-text-size !important;
          color: $address-text-color !important;
        }
        /deep/ .uni-data-tree-input{
          flex: 1;
          .placeholder-text,.selected{
            justify-content: flex-start !important;
            color: $address-text-color;
            font-size: $address-text-size !important;
            padding-left: 0rpx !important;
          }
          .selected{
            color: #303133 !important;
          }
        }
      }
    }
  }
</style>
